<div class="content-wrapper" style="min-height: 960px;">
  <section class="content-header">
    <h1>
      商品列表
    </h1>
    <ol class="breadcrumb">
      <li>
        <a [routerLink]="['/main']">
          <i class="fa fa-dashboard"></i>首页
        </a>
      </li>
      <li class="active">
        <a [routerLink]="['/goods/list']">商品列表</a>
      </li>
    </ol>
  </section>
  <section class="content">
    <div class="row">
      <div class="col-md-12">
        <div class="box">
          <!--<div class="box-header">-->
          <!--</div>-->
          <div class="box-body">
            <div id="example1_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
              <div class="row">
                <div class="col-md-6">
                  <div class="dataTables_length" id="example1_length">
                    <label>
                      <a class="btn btn-primary" [routerLink]="['/goods/detail']">添加商品</a>
                    </label>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="dataTables_filter" id="example1_filter">
                    <label>Search:
                      <input class="form-control input-sm" type="search" [(ngModel)]="keyword" (keyup.enter)="search()">
                    </label>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <table id="example1" class="table table-bordered table-striped dataTable" [(mfSortOrder)]="sortOrder" [(mfSortBy)]="sortBy"
                         [mfRowsOnPage]="rowsOnPage" [mfData]="goods" (mfOnPageChange)="onPageChange($event)"
                         [mfActivePage]="activePage" [mfIsServerPagination]="true" #mf="mfDataTable"
                         [(mfAmountOfRows)]="itemsTotal" (mfSortOrderChange)="onSortOrder($event)" style="border: 1px solid #f4f4f4;">
                    <thead>
                    <tr role="row">
                      <th width="30%">商品名</th>
                      <th width="15%">型号</th>
                      <th width="15%">类别</th>
                      <th width="10%">数量</th>
                      <th width="10%">进价</th>
                      <th width="10%">零售价</th>
                      <th width="10">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr role="row" *ngIf="itemsTotal==0">
                      <td colspan="7" class="no-data-prompt">暂无数据</td>
                    </tr>
                    <tr role="row" *ngFor="let good of goods">
                      <td class="pointer">{{good.name}}<span class="label label-warning" *ngIf="good.warning">库存报警</span></td>
                      <td>{{good.model}}</td>
                      <td>{{good.categoryName}}</td>
                      <td>{{good.inventory}}件</td>
                      <td>{{good.costPrice}}元</td>
                      <td>{{good.retailPrice}}元</td>
                      <td><a class="btn btn-info btn-sm" style="width: 80%" [routerLink]="['/goods/detail']" [queryParams]="{goodsId:good.id}" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
                        详情</a>
                      </td>
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr>
                      <td colspan="7">
                        <mfBootstrapPaginator class="pull-right"></mfBootstrapPaginator>
                      </td>
                    </tr>
                    </tfoot>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
